<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
<template>
<div>
    <el-form ref="form" :model="form" label-width="100px" :inline="true">
        <el-form-item class="select">
            <el-select v-model="form.phoneType" style="width:135px">
              <el-option label="中国大陆+86" value="中国大陆+86"></el-option>
              <el-option label="区域二" value="区域二"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-input v-model="form.cellphone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input v-model="form.password"
            style="width:350px" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
            <span><el-checkbox v-model="save">记住我</el-checkbox></span>
            <span class="fun">忘记密码？</span>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" style="width:350px" round>登录</el-button>
        </el-form-item>
        <div>
          <span>还没有账号？</span>
          <span class="goLogin" @click="$router.push('/register')">立即注册</span>
        </div>
        <ul class="toolLogin">
          <li class="weixin"></li>
          <li class="weibo"></li>
          <li class="qq"></li>
      </ul>
    </el-form>
</div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        phoneType: '中国大陆+86',
        cellphone: '',
        password: '',
      },
      save: false,

    };
  },
};
</script>

<style scoped lang="less">
.fun {
    margin-left: 210px;
    color: #409eff;
}

.goLogin {
      margin-left: 10px;
      color: #409eff;
  }

  .toolLogin {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 350px;
      li {
          margin-left: 8px;
          margin-right: 8px;
          width: 32px;
          height: 32px;
      }
      .weixin {
          background-image: url('../assets/web_wecha.png');
      }

      .weibo {
          background-image: url('../assets/web_weibo.png');
      }

      .qq {
          background-image: url('../assets/web_qq.png');
      }
  }
</style>
